<template>
  <div class="grid-box">
    <!-- 第一行 -->
    <div class="grid-container">
      <dv-border-box-13>
        <staffManagement />
      </dv-border-box-13>
      <dv-border-box-11 title="安全生产日历">
        <center />
      </dv-border-box-11>
      <dv-border-box-13>
        <articleManagement />
      </dv-border-box-13>
    </div>
    <!-- 第二行 -->
    <div class="grid-container">
      <dv-border-box-12>
        <productionManagement />
      </dv-border-box-12>
      <dv-border-box-13>
        <!-- <deviceManagement /> -->
      </dv-border-box-13>
      <dv-border-box-12>
        <costManagement />
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
import productionManagement from './productionManagement'
import costManagement from './costManagement'
import articleManagement from './articleManagement'
// import deviceManagement from './deviceManagement'
import staffManagement from './staffManagement'
import center from './center'

export default {
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  components: {
    productionManagement,
    costManagement,
    articleManagement,
    // deviceManagement,
    staffManagement,
    center
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.grid-box {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  height: 100%;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
  grid-gap: 8px; /* 盒子之间的间距 */
}
.dv-border-box-12,
.dv-border-box-13,
.dv-border-box-11 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.dv-border-box-11 {
  padding: 3rem 1rem 1rem 1rem;
}
</style>
